<template>
	<view>
		<view class="content">
			<scroll-view scroll-x="true" class="scroll" @scroll="scroll">
				<view class="box" style="background-image: url(../../static/aa20200208173916.png);" @click="ticketDes">
					<!--    <view class="slide_line1">
        	        	<view  class="font_30">付费入场</view>
        	        	<view  class="recommend">推荐</view>
        	        </view>
        	        <view  class="slide_line2">直升99%匹配成功率</view> -->
				</view>
				<view class="box" style="background-image: url(../../static/bb_20200208174305.png);" @click="ticketDes1">
					<!-- <view  class="slide_line1">
        	        	<view  class="font_30">免费入场</view>
        	        </view>
        	        <view  class="slide_line2">可通过好友助力提高匹配成功率</view> -->
				</view>
			</scroll-view>
			<view v-if="showTicket" class="ticket">只需5.2元，高匹配率进场</view>
			<view v-if="!showTicket" class="ticket">只需邀请好友助力即可，免费高匹配率进场</view>
		</view>
		<view v-if="showTicket" class="bottom">
			<view>
				<span class="font_gray">支付金额：</span>
				<span class="price">￥5.20</span>
			</view>
			<view class="bottom_btn">入场匹配</view>
		</view>
		<view v-if="!showTicket" class="bottom">
			<view>
				<span class="font_gray"></span>
				<span class="price"></span>
			</view>
			<view class="bottom_btn">邀请好友</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showTicket: true
		};
	},
	methods: {
		scroll(e) {
			if (e.detail.scrollLeft < 140) {
				this.showTicket = true;
			} else {
				this.showTicket = false;
			}
		},
		ticketDes() {
			console.log('aaaa');
		},
		ticketDes1() {}
	}
};
</script>

<style scoped>
.content {
	padding: 0 30upx;
}

.scroll {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin: 50rpx auto;
}

.box {
	display: inline-block;
	width: 600rpx;
	height: 350rpx;
	background-color: #f436363b;
	/* box-shadow: 0 0 40px 0 rgba(112,91,187,.89); */
	margin-right: 30upx;
	border-radius: 15px;
}
.images {
	width: 100%;
	height: 100%;
	border-radius: 16upx;
}
.slide_line1 {
	-ms-flex-align: center;
	align-items: center;
}
.slide_line1,
.slider1_1 {
	display: -ms-flexbox;
	display: flex;
}
.font_30 {
	font-size: 26px;
	margin-right: 20px;
}
.recommend {
	font-size: 11px;
	color: #ff6804;
	border: 2px solid #ff6804;
	border-radius: 20px;
	padding: 2px 6px;
}
.slide_line2 {
	font-size: 12px;
	margin-top: 10px;
	letter-spacing: 2px;
}

.box:last-child {
	margin-right: 0;
}

.ticket {
	font-size: 16px;
	margin: 30rpx auto;
	text-align: center;
}
.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	box-shadow: 0 0 100px 0 #b6b6b6;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.font_gray {
	color: gray;
	font-size: 14px;
	float: left;
}
.price {
	color: #ff97a9;
	float: left;
	line-height: 100rpx;
}
.bottom_btn {
	width: 150px;
	height: 70%;
	border-radius: 20px;
	line-height: 70rpx;
	text-align: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: #ff97a9;
	color: #fff;
	float: left;
}
</style>
